<template>
  <div>
    <!-- 头部导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>食品分类列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-table :data="options" style="width: 100%" stripe>
      <el-table-column
      prop="name"
      label="类型"
      
      width="180">
    </el-table-column>
    <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.canuse" type="success">可选择</el-tag>
          <el-tag v-else type="danger">不可选</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'
import {createNamespacedHelpers} from 'vuex'
const {mapState,mapActions}  = createNamespacedHelpers('category')
export default {
    data(){
        return{
            // options:[{name:"炒菜",canuse:true},{name:"烧菜",canuse:false}]
        }
    },
    computed:{
      ...mapState(["options"])
    },
    methods:{
        handleEdit(index, row) {
        // console.log(index, row);
        this.$router.push(`/categoryEdit/${row._id}`)
      },
        ...mapActions(["getCategoryAsync"])
    },
    mounted(){
        this.getCategoryAsync();
    }
};
</script>

<style>
</style>